import { type FC, useEffect, useState } from 'react';

import { type ProjectInfo } from '@/api/projectManager';
import { deviceManagerListApi } from '@/api/deviceManagerApi';
import { deviceGroupListApi } from '@/api/deviceGroupApi';

/**
 * 项目添加/编辑表单组件属性
 */
interface ProjectAddFormProps {
  /** 表单实例 */
  form: FormInstance;
  /** 项目数据 */
  data: ProjectInfo;
  /** 模式：新增或编辑 */
  mode?: 'add' | 'edit';
}

/**
 * 地址信息类型
 */
interface AddressInfo {
  address: string;
  location: {
    lat: number;
    lng: number;
  };
}

/**
 * 远程数据获取参数接口
 */
interface FetchParams {
  page: number;
  pageSize: number;
  [key: string]: any;
}

/**
 * 项目添加/编辑表单组件
 * 提供项目名称、地址、备注等信息的编辑功能
 */
const ProjectAddForm: FC<ProjectAddFormProps> = props => {
  const { form, mode = 'add' } = props;

  // 地图选择器开关状态
  const [mapOpen, setMapOpen] = useState(false);

  /**
   * 获取设备列表数据
   * 用于设备选择器的远程数据源
   * @param params 查询参数
   * @returns 格式化的设备选项数据
   */
  const fetchRemoteSelectDataDevice = async (params: FetchParams) => {
    try {
      const res = await deviceManagerListApi(params);

      if (res.success && res.data) {
        const { page, pageSize } = params;
        const hasMore = page * pageSize < res.data.total;

        const newData = res.data.records.map(item => {
          return {
            ...item,
            label: `${item.deviceName}-${item.code}`,
            value: item.id,
          };
        });

        return {
          data: newData,
          total: res.data.total,
          hasMore,
        };
      }

      return {
        data: [],
        total: 0,
        hasMore: false,
      };
    } catch (error) {
      console.error('获取设备列表失败:', error);
      return {
        data: [],
        total: 0,
        hasMore: false,
      };
    }
  };

  /**
   * 获取设备分组列表数据
   * 用于设备分组选择器的远程数据源
   * @param params 查询参数
   * @returns 格式化的设备分组选项数据
   */
  const fetchRemoteSelectDataDeviceGroup = async (params: FetchParams) => {
    try {
      const res = await deviceGroupListApi(params);

      if (res.success && res.data) {
        const { page, pageSize } = params;
        const hasMore = page * pageSize < res.data.total;

        const newData = res.data.records.map(item => {
          return {
            ...item,
            label: `${item.groupName}(${item.deviceCount || 0})`,
            value: item.id,
          };
        });

        return {
          data: newData,
          total: res.data.total,
          hasMore,
        };
      }

      return {
        data: [],
        total: 0,
        hasMore: false,
      };
    } catch (error) {
      console.error('获取设备分组列表失败:', error);
      return {
        data: [],
        total: 0,
        hasMore: false,
      };
    }
  };

  /**you
   * 地图选择取消回调
   */
  const mapCancel = () => {
    setMapOpen(false);
  };

  /**
   * 地图选择确认回调
   * @param values 地图选择的结果
   */
  const mapOk = (values: unknown) => {
    // 类型断言，确保是地址信息
    const addressInfo = values as AddressInfo;
    form.setFieldsValue({
      longitude: addressInfo.location.lng,
      latitude: addressInfo.location.lat,
      address: addressInfo.address,
    });
    setMapOpen(false);
  };

  // 获取绑定类型和分组ID的表单值
  const bindType = AForm.useWatch('bindType', form);
  const groupId = AForm.useWatch('groupId', form);
  const deviceParams = {
    groupId: bindType == 1 ? '' : groupId,
  };

  return (
    <ARow gutter={8}>
      {/* 地图选择器 */}
      <AmapBox mapType="addressType" open={mapOpen} onCancel={mapCancel} onOk={mapOk} detail={{}} />

      <ACol span={24}>
        <AForm.Item
          name="name"
          label="项目名称"
          rules={[
            { required: true, message: '请输入项目名称' },
            { max: 100, message: '项目名称不能超过100个字符' },
          ]}
        >
          <AInput placeholder="请输入项目名称" allowClear />
        </AForm.Item>
      </ACol>
      {/* 编辑模式下显示授权码（不可编辑） */}
      {mode === 'edit' && (
        <ACol span={24}>
          <AForm.Item name="authorizationCode" label="授权码">
            <AInput disabled placeholder="授权码" readOnly />
          </AForm.Item>
        </ACol>
      )}
      <ACol span={24} className="relative mb-2">
        <AForm.Item name="address" label="项目地址">
          <AInput placeholder="请输入项目地址" allowClear />
        </AForm.Item>
        <span
          onClick={() => setMapOpen(true)}
          className="color-primary cursor-pointer absolute bottom-0 left-0 flex-center pl-2"
        >
          <SvgIcon name="icon-location" className=" text-4 mr-0.5" />
          地图选点
        </span>
      </ACol>

      {/* 设备绑定功能在新增和编辑模式下都显示 */}
      <>
        <ACol span={24}>
          <AForm.Item
            label="绑定设备"
            name="bindType"
            initialValue={1}
            rules={[{ required: true, message: '请选择绑定设备方式' }]}
          >
            <ARadio.Group
              onChange={() => {
                form.setFieldValue('deviceIds', []);
                form.setFieldValue('groupId', undefined);
              }}
              options={[
                {
                  value: 1,
                  label: '不通过设备分组',
                },
                {
                  value: 2,
                  label: '通过设备分组',
                },
              ]}
            ></ARadio.Group>
          </AForm.Item>
        </ACol>
        {bindType == 2 && (
          <ACol span={24}>
            <AForm.Item label="选择设备分组" name="groupId">
              <RemoteSelect
                onSelect={() => {
                  form.setFieldValue('deviceIds', []);
                }}
                searchable
                fetchData={fetchRemoteSelectDataDeviceGroup}
              />
            </AForm.Item>
          </ACol>
        )}
        <ACol span={24}>
          <AForm.Item label="设备列表" name="deviceIds">
            <RemoteSelect
              searchable
              searchParams={deviceParams}
              mode="multiple"
              fetchData={fetchRemoteSelectDataDevice}
            />
          </AForm.Item>
        </ACol>
      </>

      <ACol span={24}>
        <AForm.Item
          name="remark"
          label="项目描述"
          rules={[{ max: 500, message: '项目描述不能超过500个字符' }]}
        >
          <AInput.TextArea
            placeholder="请输入项目描述（可选）"
            rows={4}
            showCount
            maxLength={500}
            allowClear
          />
        </AForm.Item>
      </ACol>
    </ARow>
  );
};

export default ProjectAddForm;
